<template>
	<view>
		<!-- :statusBar=true 保留状态栏 -->
		<uni-nav-bar @clickLeft="back" @clickRight="submit" leftIcon="arrowleft" rightText="发布" :statusBar="true">
			<view class="flex-sc-ac" style="width: 100%;font-size: 28rpx;" @tap="changeLook()">
				{{lookInfo}}
				<view class="icon iconfont icon-xialazhankai">
				</view>
			</view>
		</uni-nav-bar>
		<!-- 多行文件域 -->
		<view class="uni-textarea">
			<textarea placeholder="说一句话吧~" v-model="textarea"></textarea>
		</view>
		<!-- 图片上传组件 -->
		<!-- <upload-images @uploadImages='uploadImages'></upload-images> -->
		<upload-img ref="upload" :imageList="imageList" @uploadImages='uploadImages'></upload-img>

		<!-- 弹出层 发帖公告 -->
		<uni-popup id="popup" ref="popup" type="center">
			<view class="popup-content">
				<view class="flex-sc-ac">
					<image src="../../static/common/addinput.png"></image>
				</view>
				<button class="myButton" hover-class="myButtonHover" @tap="hiddenPop()">朕知道了</button>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				lookInfo: "所有人可见",
				textarea: "",
				imageList: [],
				exit:false
			}
		},
		onReady() {
			// 页面打开自动打开对话框
			setTimeout(() => {
				this.$refs.popup.open()
			}, 500)
		},
		//监听返回按钮 TODO 实现保留草稿的功能
		onBackPress() {
			// 监听页面返回页面 如果return true 阻止页面返回
			if (!this.exit && (this.imageList.length > 0 || this.textarea||this.textarea!="")) {
				this.preserved()
				return true
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'add-input',
				success: res => {
					if (res.data) {
						let obj = JSON.parse(res.data)
						this.textarea = obj.textarea
						this.imageList = obj.imageList
					}
				}
			})
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			submit() {
				console.log("fabu");
			},
			changeLook() {
				uni.showActionSheet({
					itemList: ['所有人可见', '仅自己可见'],
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if (res.tapIndex == 0) {
							this.lookInfo = "所有人可见";
						} else {
							this.lookInfo = "仅自己可见";
						}
					}
				})
			},
			uploadImages(arr) {
				this.imageList = arr;
			},
			hiddenPop() {
				this.$refs.popup.close();
			},
			preserved() {
				// 保存草稿
				uni.showModal({
					title: '提示',
					content: '是否保存草稿',
					cancelText: '不保存',
					confirmText: '保存',
					success: res => {
						if (res.confirm) {
							this.store()
							this.exit = true
							console.log('保存');
						} else if (res.cancel) {
							uni.removeStorage({
								key: 'add-input'
							})
							this.exit = true
							console.log('不保存');
						}
						uni.navigateBack({
							delta: 1
						})
					}
				});
			},
			store() {
				let obj = {
					textarea: this.textarea,
					imageList: this.imageList
				}
				uni.setStorage({
					key: 'add-input',
					data: JSON.stringify(obj)
				})
			}
		}

	}
</script>

<style>
	.uni-textarea {
		border: 1px solid #EEEEEE;
	}

	.popup-content {
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.myButton {
		background-color: #FFB400;
		color: #FFFFFF;
	}

	.myButtonHover {
		background-color: #F0AD4E;
		color: #F1F1F1;
	}
</style>
